import React, { Component } from "react";
import { inject, observer } from "mobx-react";

// 通过 inject 装饰器将 counter 对象注入到组件中
@inject("counter")
// 通过 observer 装饰器将 App 组件变为观察者，观察 counter 的变化，当 counter 发生变化时更新视图
@observer
class App extends Component {
  componentDidMount () {
    const { getData } = this.props.counter
    getData()
  }
  render() {
    console.log(this.props) // { counter: { count: 0 , increment, decrement} }
    const { counter } = this.props
    return (
      <div>
        <button onClick={counter.increment}>+</button>
        <span>{ counter.count }</span>
        <button onClick={counter.decrement}>-</button>
        <span>{counter.getResult}</span>
        <div>
          <input type="text" value={counter.username} onChange={(e) => counter.changeUsername(e.target.value)} />
          {counter.username}
        </div>
        
        {/* <div>
          {
            counter.users.map(user => (
              <div key={ user.id }>
                <span>{ user.id }</span>
                <span>{ user.login }</span>
              </div>
            ))
          }
        </div> */}
      </div>
    );
  }
}

export default App;
